<div class="cv-bootstrap" ng-controller="CubesViewerStudioController">

    <div class="cv-gui-panel hidden-print">

        <div class="dropdown m-b" style="display: inline-block;">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
            <i class="fa fa-fw fa-cube"></i> Cubes <span class="caret"></span>
          </button>

          <ul class="dropdown-menu cv-gui-cubeslist-menu">

            <li ng-show="cubesService.state === 1" class="disabled"><a>Loading...</a></li>
            <li ng-show="cubesService.state === 2 && cubesService.cubesserver._cube_list.length === 0" class="disabled"><a>No cubes found</a></li>
            <li ng-show="cubesService.state === 3" class="disabled text-danger"><a>Loading failed</a></li>

            <li ng-repeat="cube in cubesService.cubesserver._cube_list | orderBy:'label'" ng-click="studioViewsService.addViewCube(cube.name)"><a>{{ cube.label }}</a></li>

          </ul>
        </div>


        <div ng-if="cvOptions.backendUrl" class="dropdown m-b" style="display: inline-block; ">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
            <i class="fa fa-fw fa-file"></i> Saved views <span class="caret"></span>
          </button>

          <ul class="dropdown-menu cv-gui-catalog-menu">

            <li class="dropdown-header">Personal views</li>

            <!-- <li ng-show="true" class="disabled"><a>Loading...</a></li>  -->
            <li ng-repeat="sv in reststoreService.savedViews | orderBy:'sv.name'" ng-if="sv.owner == cvOptions.user" ng-click="reststoreService.addSavedView(sv.id)"><a style="max-width: 360px; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;"><i class="fa fa-fw"></i> {{ sv.name }}</a></li>

            <li class="dropdown-header">Shared by others</li>

            <!-- <li ng-show="true" class="disabled"><a>Loading...</a></li>  -->
            <li ng-repeat="sv in reststoreService.savedViews | orderBy:'sv.name'" ng-if="sv.shared && sv.owner != cvOptions.user" ng-click="reststoreService.addSavedView(sv.id)"><a style="max-width: 360px; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;"><i class="fa fa-fw"></i> {{ sv.name }}</a></li>

          </ul>
        </div>


        <div class="dropdown m-b" style="display: inline-block; margin-left: 5px;">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
            <i class="fa fa-fw fa-wrench"></i> Tools <span class="caret"></span>
          </button>

          <ul class="dropdown-menu">

                <li ng-click="showSerializeAdd()"><a tabindex="0"><i class="fa fa-fw fa-code"></i> Add view from JSON...</a></li>

                <div class="divider"></div>

                <li ng-click="toggleTwoColumn()" ng-class="{ 'hidden-xs': ! cvOptions.studioTwoColumn, 'disabled': studioViewsService.views.length == 0 }"><a tabindex="0"><i class="fa fa-fw fa-columns"></i> 2 column
                    <span class="label label-default" style="margin-left: 10px;" ng-class="{ 'label-success': cvOptions.studioTwoColumn }">{{ cvOptions.studioTwoColumn ? "ON" : "OFF" }}</span></a>
                </li>
                <li ng-click="toggleHideControls()" ng-class="{ 'disabled': studioViewsService.views.length == 0 }"><a tabindex="0"><i class="fa fa-fw fa-unlock-alt"></i> Hide controls
                    <span class="label label-default" style="margin-left: 10px;" ng-class="{ 'label-success': cvOptions.hideControls }">{{ cvOptions.hideControls ? "ON" : "OFF" }}</span></a>
                </li>

                <div class="divider"></div>


                <!-- <li class=""><a data-toggle="modal" data-target="#cvServerInfo"><i class="fa fa-fw fa-server"></i> Data model</a></li> -->
                <li class="" ng-class="{ 'disabled': cubesService.state != 2 }"><a data-toggle="modal" data-target="#cvServerInfo" ><i class="fa fa-fw fa-database"></i> Server info</a></li>

                <div class="divider"></div>

                <li class=""><a href="http://github.com/jjmontesl/cubesviewer/blob/master/doc/guide/cubesviewer-user-main.md" target="_blank"><i class="fa fa-fw fa-question"></i> User guide</a></li>
                <li class=""><a data-toggle="modal" data-target="#cvAboutModal"><i class="fa fa-fw fa-info"></i> About CubesViewer...</a></li>

            </ul>
        </div>

        <div style="display: inline-block; margin-left: 10px; margin-bottom: 0px;">

             <div class="form-group hidden-xs" style="display: inline-block; margin-bottom: 0px;">
                <button class="btn" type="button" title="2 column" ng-disabled="studioViewsService.views.length == 0" ng-class="cvOptions.studioTwoColumn ? 'btn-active btn-success' : 'btn-primary'" ng-click="toggleTwoColumn()"><i class="fa fa-fw fa-columns"></i></button>
             </div>
             <div class="form-group" style="display: inline-block; margin-bottom: 0px;">
                <button class="btn" type="button" title="Hide controls" ng-disabled="studioViewsService.views.length == 0" ng-class="cvOptions.hideControls ? 'btn-active btn-success' : 'btn-primary'" ng-click="toggleHideControls()"><i class="fa fa-fw fa-unlock-alt"></i></button>
             </div>

        </div>

        <div class="cv-gui-modals">
            <div ng-include="'studio/about.html'"></div>
            <div ng-include="'studio/serverinfo.html'"></div>
        </div>

    </div>

    <div class="cv-gui-workspace">

        <div class="row">
            <div ng-if="cubesService.state == 3" class="col-xs-12" style="margin-bottom: 10px;">
                <div class="alert alert-danger" style="margin: 0px;">
                    <p>Could not connect to server: {{ cubesService.stateText }}</p>
                    <p>Please try again and contact your administrator if the problem persists.</p>
                </div>
            </div>
        </div>

        <div class="row cv-views-container" data-masonry='{ "itemSelector": ".cv-view-container", "columnWidth": ".cv-views-gridsizer", "percentPosition": true }'>

            <div class="col-xs-1 cv-views-gridsizer"></div>

            <div ng-repeat="studioView in studioViewsService.views" style="display: none;" class="col-xs-12 cv-view-container sv{{ studioView.id }}" ng-class="(cvOptions.studioTwoColumn ? 'col-sm-6' : 'col-sm-12')">
                <div >
                    <div cv-studio-view view="studioView"></div>
                </div>
            </div>

        </div>

    </div>

</div>


